<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../libs/vue.js"></script>
    <link rel="stylesheet" href="../libs/animate.css">

    <style>
        .static{
            width:140px;
            height:140px;
            margin:20px;
            text-align: center;
            line-height: 140px;
            color:#fff;
            font-size: 30px;
        }
        .a{
            background: darkgoldenrod;
        }
        .b{
            border:4px solid darkred;
        }
        .c{
            border-radius: 50%;
            box-shadow:  0 0 5px 0px  #ccc;
        }
        .navs{
            display: flex;   
            width:360px;
            justify-content: space-between;
        }
        .nav-item{
            width:110px;
            height:40px;
            text-align: center;
            line-height:40px;
            background: orange;
            border-radius: 10px;
            color:#fff;
            cursor: pointer;
        }
        .nav-active{
            background: orchid;
            color:yellowgreen;
            animation: tada 1s ;
        }
        .nav-item:hover{
            background: orchid;
            color:yellowgreen;
        }
        .mains{
            width:360px;
            height:360px;
            margin-top: 20px;
        }
        .mbox{
            width:360px;
            height:360px;
            background: orchid;
            color:yellowgreen;
            font-size: 50px;
            border-radius: 20px;
            text-align: center;
            line-height: 360px;

        }
        .zoom-enter-active{
            animation: zoomInDown 1.5s;
        }
        .zoom-leave-active{
            animation: zoomOutDown 1.5s;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2> {{ title}} </h2>
        <div v-if="false">
            <div class="static a b c">1</div>
            <div class="static a b" :class="active">2 </div>
            <div class="static a " :class="{b:isb}">3</div>
            <div class="static a " :class="[classb,'c']">4</div>
            <hr>
            <div class="static" style="background: red;border:6px solid darkblue">5</div>
            <div class="static" :style="style" >6</div>
            <div class="static" :style="{backgroundColor:'red',border:'5px solid blue',borderRadius:'50%'}">7</div>
            <div class="static" :style="[obj1,obj2]">8</div>
        </div>

        <div >
            <div class="navs">
                <div class="nav-item" @click="changeCurrent(0)" :class="current==0?'nav-active':'' ">流行音乐</div>
                <div class="nav-item" @click="changeCurrent(1)" :class="current==1?'nav-active':'' ">古典音乐</div>
                <div class="nav-item" @click="changeCurrent(2)" :class="current==2?'nav-active':'' ">摇滚音乐</div>
            </div>
            <div class="mains">
                <transition-group name="zoom" mode="out-in" >
                    <div class="mbox" key="0" v-show="current==0">流行音乐 - 90 </div>
                    <div class="mbox" key="1" v-show="current==1">古典音乐 - 18 </div>
                    <div class="mbox" key="2" v-show="current==2">摇滚音乐 - 66</div>
                </transition-group>

                <!-- <div class="mbox" key="0" :style="{display:current==0?'block':'none'}">流行音乐 - 90 </div>
                <div class="mbox" key="1" :style="{display:current==1?'block':'none'}">古典音乐 - 18 </div>
                <div class="mbox" key="2" :style="{display:current==2?'block':'none'}">摇滚音乐 - 66</div> -->
            </div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            data:{
                title:"动态 class 和 style 绑定 ",
                active:'c',
                isb:true ,
                classb:'b',
                classc:"c",
                style:{
                    backgroundColor:"red",
                    border:'6px solid pink',
                    borderRadius:'50%'
                },
                obj1:{
                    backgroundColor:"yellow",
                },
                obj2:{
                    border:'16px solid pink',
                    borderRadius:'50%'
                },
                current:0
            },

            methods:{
                changeCurrent(index){
                    this.current = index;
                }
            },
            mounted(){
                document.querySelectorAll('title')[0].innerHTML = this.title;
               
            }
        }).$mount("#app")

    </script>

     <!-- 动态的class 和  style 切换   
    v-bind 用于 class 和 style 时，Vue.js 做了专门的增强   除了字符串之外，还可以是对象或数组

    v-bind
    v-bind:class 
    :class = " "  {}  []
    v-bind:style 
    :style = {}  [{}]

    :style="{display:current==i?'block':'none'} -->
</body>
</html>